<template>
<div>
  <h1 style="text-align: center">添加轮播图</h1>
  <el-card style="width: 200px;margin: 0 auto">
    <el-upload
        action="http://localhost:8080/upload/banner"
        name="picFile"
        :limit=1
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-success="handleSuccess">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <router-link to="/admin/banner">
    <el-button @click="insert()" style="margin:20px 0 0 35px">添加</el-button>
    </router-link>
  </el-card>
</div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      banner:{}
    }
  },
  methods:{
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    insert(){
      if(this.banner.url==null){
        alert("上传图片不能为空")
        return
      }
      let url = 'http://localhost:8080/banners/add'
      axios.post(url,this.banner).then(response=> {
        alert("添加成功!")
      })

    },
    handleSuccess(response,file,fileList){
      console.log("文件上传完成,图片名="+response)
      this.banner.url = response
    },
  }
}
</script>

<style scoped>

</style>